<template>
    <el-form-item lavel="規格選項">
        <el-card shadow="never" class="w-full mb-3" v-for="(item,index) in sku_list" :key="item.id">
            <template #header>
                 <div class="flex items-center">
                    
                    <el-input v-model="item.specs_name" placeholder="規格名稱" style="width:200px;" @change="editspecs(item)">
                        <template #append>
                             <el-icon>
                                 <more/>
                             </el-icon>   
                        </template>
                    </el-input>
                   
                    <el-button class="ml-auto" size="small" @click="deletespecs(item.id)"> <el-icon> <Delete/></el-icon> </el-button>
                 </div>   
            </template>
            <SkuItem :specId="item.id"></SkuItem>
        </el-card>
         <el-button size="small" type="success" @click="addspecs">添加規格</el-button>
    </el-form-item>
</template>

<script setup>
import SkuItem from "./SkuItem.vue"
import {sku_list,addspecs,editspecs,deletespecs} from "@/composables/useSku.js"
</script>

<style>
.el-card__header{
    @apply !p-2 bg-gray-50
}
</style>